import _ from "lodash";
import {useState} from "react";
import {Button, Form, Input, Table, message} from "antd";
import {CloudUploadOutlined} from "@ant-design/icons";
import {orderGetList} from "@/api";
import {marginLeft} from "@/utils";
import {useList, useBoolean} from "@/hooks";
import {columnImage, getColumnsId} from "@/components/Columns";
import {UploadModal, Tooltips, CustomFormItem, RPick, SelectFormItem} from "@/components/common";

const {Search} = Input;

const ORDER_TYPE = [
    {value: "", label: "全部"},
    {value: "已付款", label: "已付款", color: "#ED1B2F"},
    {value: "已收货", label: "已收货", color: "#79EA27"},
    {value: "已结算", label: "已结算", color: "#1677FF"},
    {value: "已失效", label: "已失效", color: "#A29AA1"},
];

const OrderList = () => {
    const [open, on, off] = useBoolean(false);
    const [subOrderNumber, setSubOrderNumber] = useState("");
    const [promotionPositionId, setPromotionPositionId] = useState("");
    const [orderStatus, setOrderStatus] = useState("");
    const [createTimeStart, setCreateTimeStart] = useState("");
    const [createTimeEnd, setCreateTimeEnd] = useState("");

    const {
        data: {list, pageNum, pageSize, total},
        pagingChange,
        refresh,
    } = useList(
        {
            api: orderGetList,
            params: {
                subOrderNumber,
                promotionPositionId,
                orderStatus,
                createTimeStart,
                createTimeEnd,
            },
        },
        [subOrderNumber, promotionPositionId, createTimeStart, createTimeEnd, orderStatus]
    );
    const handleOrderFind = (val: string) => setSubOrderNumber(val.trim());
    const handleAdFind = (val: string) => setPromotionPositionId(val.trim());

    const columns = [
        getColumnsId({pageNum, pageSize}),
        {
            title: "商品标题",
            dataIndex: "productTitle",
            key: "productTitle",
            width: 200,
            render: val => <Tooltips title={val} width={150} />,
        },
        columnImage,
        {title: "订单编号", dataIndex: "subOrderNumber", key: "subOrderNumber"},
        {title: "推广位", dataIndex: "promotionPositionId", key: "promotionPositionId"},
        {title: "付款金额", dataIndex: "paymentAmount", key: "paymentAmount"},
        {title: "付款预估收入", dataIndex: "estimatedPaymentIncome", key: "estimatedPaymentIncome"},
        {
            title: "订单状态",
            dataIndex: "orderStatus",
            key: "orderStatus",
            render: value => (
                <Button size="small" type="text" style={{color: _.find(ORDER_TYPE, {value}).color}}>
                    {value}
                </Button>
            ),
        },
        {
            title: "结算预估收入",
            dataIndex: "estimatedSettlementIncome",
            key: "estimatedSettlementIncome",
            render: (val, row) => (
                <Button size="small" style={{color: _.find(ORDER_TYPE, {value: row.orderStatus}).color}} type="text">
                    {val}元
                </Button>
            ),
        },
        {
            title: "操作",
            dataIndex: "index",
            render: () => (
                <Button type="primary" size="small">
                    详情
                </Button>
            ),
        },
    ];
    const handleSuccess = e => {
        if (e) {
            refresh();
            off();
            message.success({content: "文件导入成功"});
        }
    };

    return (
        <div className="order-list">
            <Form className="fl">
                <CustomFormItem label="推广位">
                    <Search style={{width: 200}} allowClear placeholder="推广位" onSearch={handleAdFind} />
                </CustomFormItem>
                <CustomFormItem label="订单查询" style={marginLeft}>
                    <Search style={{width: 240}} allowClear onSearch={handleOrderFind} placeholder="请输入订单编号" />
                </CustomFormItem>
                <CustomFormItem label="日期" style={marginLeft}>
                    <RPick setStartTime={setCreateTimeStart} setEndTime={setCreateTimeEnd} />
                </CustomFormItem>
                <CustomFormItem style={marginLeft}>
                    <Button icon={<CloudUploadOutlined />} onClick={on} type="primary">
                        导入订单
                    </Button>
                </CustomFormItem>
            </Form>
            <div className="fl">
                <SelectFormItem options={ORDER_TYPE} label="订单状态" onChange={setOrderStatus} />
            </div>
            <Table
                rowKey={row => JSON.stringify(row)}
                pagination={{current: pageNum, pageSize, showSizeChanger: true, total}}
                dataSource={list}
                columns={columns}
                onChange={pagingChange}
            />
            <UploadModal
                success={handleSuccess}
                title="上传订单"
                open={open}
                onCancel={off}
                footer={false}
                icon={<CloudUploadOutlined size={80} />}
                bodyStyle={{padding: "20px 0"}}
            />
        </div>
    );
};

export default OrderList;
